<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>公众号信息</title>
    <script src="../js/vue.js"></script>
    <link rel="stylesheet" href="../css/base.css">
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="../css/gzhInfo1.css">
</head>

<body>
    <div id="app">
        <!-- 头部 -->
        <top-bar :topshuju=sendTopData></top-bar>
        <!-- 开始 -->
        <div class="displayCenter">
            <!-- 左边部分 -->
            <div class="leftBox"> <left-site></left-site></div>
            <div class="pageContent">
                <!-- 当前所在位置 -->
               <section class="displayBetween title-weizhi">
                    <div>您当前所在位置：公众号名称>公众号信息</div>
                    <div> <a class='color337AB7-a'> 公众号绑定教程</a> <img src="../img/gzhInfo01.png"/> </div>
               </section> 
               <!-- 公众号信息 -->
               <section class="displayBetween gzhInfo">
                    <div class="gzhInfo-left">
                        <p class="erweima"> <img src="../img/gzhInfo02.png"/> </p>
                        <div class="logoAndInfo displayBetween">
                            <div class="logoBox">
                                <!-- <img :src="logo"/> -->
                            </div>
                            <div class="gzhxinxi">
                                <p class="siteName">族蚂网3242342353453453453frret</p>
                                <p class="whichStatus">订阅号 <span>未认证</span>  <span class="haveRenzheng">已认证</span></p>
                            </div>
                        </div>
                        <div class="gzhInfo-left-bottom"> <img src="../img/gzhInfo03.png"/>切换</div>
                    </div>
                    <div class="gzhInfo-right displayBetween">
                        <section class="headImgBox">
                            <img :src="headImg">
                        </section>
                        <section class="gzhInfo-right-R">
                            <h3>{{gzhName}}<span> <img src="../img/authList01.png"> 域名未进行ICP备案，<i style="color:ff0000">网站</i>可能会被工信部封停<a>立即升级</a></span></h3>
                            <p>二级域名: {{erjiDomain}}</p>
                            <p>自主域名: {{ownDomain}} <a class="color337AB7-a">设置</a> </p>
                            <p>发布状态:未发布</p>
                            <div class="gzhInfo-R-btnGroup">
                                <span>设计微站</span><span>数据分析</span><span class="activeBtn">升级</span><span class="activeBtn">续费</span>
                            </div>
                        </section>
                    </div>

               </section>
               <!-- 快捷入口 -->
               <section class="quickEntry">
                    <h3 class="quickEntry-head"> <img src="../img/chuizhixian.png"> 快捷入口</h3>
                    <p class="quickEntry-tip"> <img src="../img/authList01.png"> 您当前为"免费版"套餐用户,授权公众号数量已达上限。<a>立即升级</a></p>
                    <ul class="quickEntry-cont">
                        <li>
                            <div class="li-top ">
                                <section class="li-top-left">
                                    <img src="../img/gzhInfo04.png"/>
                                    <span> <div>商品推</div> <p>快速发布商品</p> </span>
                                </section>
                                <section class="li-top-right">
                                    <span>创建</span>
                                </section>
                            </div>
                            <div class="li-bottom displayBetween">
                                <div class="li-bottom-img"><img src="../img/gzhInfo05.png"></div>
                                <div class="li-bottom-info">海量商品信息一键引用，手机端编辑发布，快速便捷；代理裂变商家无线。</div>
                            </div>
                        </li>
                        <li>
                                <div class="li-top ">
                                    <section class="li-top-left">
                                        <img src="../img/gzhInfo04.png"/>
                                        <span> <div>服务推</div> <p>快速发布服务</p> </span>
                                    </section>
                                    <section class="li-top-right">
                                        <span>创建</span>
                                    </section>
                                </div>
                                <div class="li-bottom displayBetween">
                                    <div class="li-bottom-img"><img src="../img/gzhInfo05.png"></div>
                                    <div class="li-bottom-info">服务模板一键引用，手机端编辑发布，快速便捷；代理裂变促进成交。</div>
                                </div>
                        </li>
                        <li>
                                <div class="li-top ">
                                    <section class="li-top-left">
                                        <img src="../img/gzhInfo04.png"/>
                                        <span> <div>文章发布工具</div> <p>海量文章模板，一键引用</p> </span>
                                    </section>
                                    <section class="li-top-right">
                                        <span>创建</span>
                                    </section>
                                </div>
                                <div class="li-bottom displayBetween">
                                    <div class="li-bottom-img"><img src="../img/gzhInfo05.png"></div>
                                    <div class="li-bottom-info">手机端文章发布工具，小说、文章、技术贴即时更新，打造个性化知识交流平台！</div>
                                </div>
                        </li>
                        <li>
                                <div class="li-top ">
                                    <section class="li-top-left">
                                        <img src="../img/gzhInfo04.png"/>
                                        <span> <div>资讯发布工具</div> <p>快速发布资讯</p> </span>
                                    </section>
                                    <section class="li-top-right">
                                        <span>创建</span>
                                    </section>
                                </div>
                                <div class="li-bottom displayBetween">
                                    <div class="li-bottom-img"><img src="../img/gzhInfo05.png"></div>
                                    <div class="li-bottom-info">活动、资讯信息极速发布，手机端自由编辑，点赞、评论互动即刻掌握！</div>
                                </div>
                            </li>
                            <li>
                                    <div class="li-top ">
                                        <section class="li-top-left">
                                            <img src="../img/gzhInfo04.png"/>
                                            <span> <div>优惠券</div> <p>多种营销玩法，促活、拉新神器</p> </span>
                                        </section>
                                        <section class="li-top-right">
                                            <span>创建</span>
                                        </section>
                                    </div>
                                    <div class="li-bottom displayBetween">
                                        <div class="li-bottom-img"><img src="../img/gzhInfo05.png"></div>
                                        <div class="li-bottom-info">多种营销玩法，幸运大转盘、满减劵、签到抵扣卷、折扣券、满就送提高门店客单转化率！</div>
                                    </div>
                            </li>
                            <li>
                                    <div class="li-top ">
                                        <section class="li-top-left">
                                            <img src="../img/gzhInfo04.png"/>
                                            <span> <div>带参二维码</div> <p>活动营销必备</p> </span>
                                        </section>
                                        <section class="li-top-right">
                                            <span>创建</span>
                                        </section>
                                    </div>
                                    <div class="li-bottom displayBetween">
                                        <div class="li-bottom-img"><img src="../img/gzhInfo05.png"></div>
                                        <div class="li-bottom-info">创建活动带参二维码，精准活动推送，活动运营分析必备！</div>
                                    </div>
                            </li>
                        
                    </ul>
                </section>
            </div>
        </div>
    </div>
</body>
<!-- 头部 -->
<script src="../common/top-bar.js"></script>
<!-- 左侧导航栏 -->
<script src="../common/left-site.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            //ceshi:{'ces':111},
            img1: '../img/auth01.png',
            img2: '../img/auth02.png',
            sendTopData: {//需要传递给顶部头部的信息
                YourName: 'Thinker',
                CommonName: '上海有限公司',
                HeadImg: '../img/authList01.png'
            },
            logo:'../img/authList02.png',
            headImg:'../img/defaultHeadImg.png',
            gzhName:'公众号名称微站',
            erjiDomain:'erjiyuming.com',
            ownDomain:'waweartfesr.com'
        },
        created:function() {
       
        },
        methods: {
          
        },
    })
</script>

</html>